<template>

    <div class="wrap">
        <div class="headedit">
            <div class="ordleft"> <img class="ordleft" style="width: 30px; height: 30px;"
                    src="../../assets/shopimg/向左箭头.png" alt="" @click="$router.back()"></div>
            <div class="ord">商品清单
            </div>
            <div class="edit" v-if="!doedit" @click="toedit">编辑</div>
            <div class="edit" v-if="doedit" @click="backcart">完成</div>
        </div>
        <div class="cartlis">
            <div class="cartitem" v-for="(item, index) in cartlist" :key="index">
                <div class="itemctd">
                    <van-checkbox v-model="item.state" checked-color="orangered" icon-size="35px"></van-checkbox>
                </div>
                <div class="itemimg">
                    <img :src="item.img" alt="" />
                </div>
                <div class="iteminfo">
                    <div class="title">{{ item.title }}</div>
                    <div class="ctp">
                        <div class="price">
                            ￥<span>{{ item.price }}</span>
                        </div>
                        <div class="count">
                            <div class="sub" @click="sub(item)">-</div>
                            <div class="num">{{ item.num }}</div>
                            <div class="add" @click="add(item)">+</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <van-submit-bar :price="totalprice * 100" button-text="支付" @submit="onSubmit" v-if="!doedit">
            <van-checkbox v-model="allchecked" checked-color="orangered" @click="clickallck">全选</van-checkbox>
        </van-submit-bar>
        <van-submit-bar button-text="删除" @click="del" v-if="doedit">
            <van-checkbox class="dleck" v-model="allchecked" checked-color="orangered"
                @click="clickallck">全选</van-checkbox>
        </van-submit-bar>
    </div>
</template>

<script setup lang="ts">
import http from '@/http/http'
import router from '@/router'
import { ref, onUpdated, computed } from 'vue'
import "./index.css"
const Sumprice = ref(0)
const doedit = ref(false)
const allchecked = ref(JSON.parse(localStorage.getItem('cartlist')).every(item => item.state))
const cartlist = ref(JSON.parse(localStorage.getItem('cartlist')) || [])
onUpdated(() => {
    console.log(cartlist.value)

    console.log(JSON.parse(localStorage.getItem('cartlist')))
    allchecked.value = cartlist.value.every(item => item.state)


    localStorage.setItem('cartlist', JSON.stringify(cartlist.value))
})
const totalprice = computed(() => {
    let sum = 0
    cartlist.value.forEach((value, index) => {
        if (value.state) {
            sum += value.price * value.num
        }
    })
    return sum.toFixed(2)
})

console.log(totalprice)
const sub = (item: any) => {
    console.log(item.num)
    if (item.num > 1) {
        item.num--
    }
}

const add = (item: any) => {
    console.log(item.num)
    item.num++
}
console.log(cartlist.value)


const clickallck = () => {
    cartlist.value.forEach((item, index) => {
        item.state = allchecked.value
    })

}
const toedit = () => {
    doedit.value = true
}
const backcart = () => {
    doedit.value = false
}
const del = () => {
    const dellist = []
    cartlist.value.forEach((value, index) => {
        if (value.state) {
            dellist.push(index)
        }
    })
    console.log(dellist);
    dellist.forEach(item => {
        cartlist.value.splice(item, 1)
    })
    console.log(dellist);
}

const onSubmit = () => {
    // 存储购物车数据
    const selectedItems = cartlist.value.filter(item => item.state);
    localStorage.setItem('cartlist', JSON.stringify(cartlist.value));
    // 跳转到订单页面
    router.push({
        path: '/order',
        query: { selectedItems: JSON.stringify(selectedItems) } // 使用 query 传递选中的商品
    });
}
</script>

<style lang="scss" scoped></style>
